<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/ali/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/ali/css/win_productIndex.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/ali/css/frm_productSize.css"/>
    <!--aui图标引用-->
    <style>

    </style>
</head>
<body>
<div id="page1">
    <!--返回-->
    <header>
        <div class="return" tapmode onclick="api.closeWin();">
            <img src="__PUBLIC__/ali/image/fanhui.png"/>
        </div>
        <!--分享-->
        <div class="share" onclick="share()">
            <img src="__PUBLIC__/ali/image/zhuanfa.png"/>
        </div>
    </header>
    <!--轮播图开始-->
    <div id="swipe" class="swipe">
        <div class="swipe-wrap">
            <div class="swipe-box">
                <img src="__PUBLIC__/ali/image/banner1.jpg" alt="">
            </div>
            <div class="swipe-box">
                <img src="__PUBLIC__/ali/image/banner2.jpg" alt="">
            </div>
            <div class="swipe-box">
                <img src="__PUBLIC__/ali/image/banner1.jpg" alt="">
            </div>
        </div>
        <div class="title-box">
            <ul class="title-box-ul">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <!--轮播图结束 -->
    <div class="heartbeat">
        <h3>TA也心动了</h3>
        <img src="__PUBLIC__/ali/image/touxiang.png"/>
        <img src="__PUBLIC__/ali/image/touxiang.png"/>
        <img src="__PUBLIC__/ali/image/touxiang.png"/>
        <img src="__PUBLIC__/ali/image/touxiang.png"/>
        <img src="__PUBLIC__/ali/image/touxiang.png"/>
        <img src="__PUBLIC__/ali/image/touxiang.png"/>
        <img src="__PUBLIC__/ali/image/touxiang.png"/>
        <span class="count"><em onclick="collect()">999</em></span>
    </div>
    <div class="name">
        <p>
            乐视·超级自行车（预售）<span>已预售:508件</span>
        </p>
        <p>
            库存：深圳（香港）
        </p>
        <p name="red">
            完成下单，闪电发货
        </p>
    </div>
    <div class="list red">
        <form>
            <h3>颜色：</h3>
            <label><span>默认</span>
                <input class="productIndex-radio" type="radio" name="demo">
            </label>
            <br/>
        </form>
    </div>
    <div class="list">
        <form>
            <h3>超级自行车：</h3>
            <label><span>斯塔利</span>
                <input type="radio" class="productIndex-radio" name="radio">
            </label>
            <label><span>西夫拉克</span>
                <input class="productIndex-radio" type="radio" name="radio">
            </label>
            <label><span>阿尔普迪埃</span>
                <input class="productIndex-radio" type="radio" name="radio">
            </label>
        </form>
    </div>
    <div class="details">
        <img src="__PUBLIC__/ali/image/cpindex01.jpg"/>
        <img src="__PUBLIC__/ali/image/cpindex02.jpg"/>
    </div>
    <div class="none"></div>
    <footer>
        <div class="footer-left" onclick="productSize()">
            直接购买
        </div>
        <!--<img src="../../image/aixinorange.png"/>-->
        <!--<div class="footer-right" onclick="advanceSale()">-->
            <!--参与预售-->
        <!--</div>-->
    </footer>
    <!--加入购物车-->
</div>
<div class="wrap" id="page2">
    <div class="shadow" tapmode="tap-active">
        <span></span>
    </div>
    <div class="main">
        <header>
            &emsp;&emsp;&emsp;选择产品规格<span><img src="__PUBLIC__/ali/image/close-white.png" onclick="closeSize()"/></span>
        </header>
        <div class="headline">
            <img src="__PUBLIC__/ali/image/chanpin.jpg"/>
            <p>
                Burberry
            </p>
            <p class="lineOne">
                Burberry男士秋季 可拆...Burberry男士秋季 可拆...
            </p>
            <span>￥4,396</span>
        </div>
        <div class="size">
            <p>
                商品规格<em>（一次限购3件）</em>
            </p>
            <!--产品规格-->
            <form>
                <label><span>s</span>
                    <input type="radio" name="sex" class="taglia-input"/>
                </label>
                <label><span>m</span>
                    <input type="radio" name="sex" class="taglia-input"/>
                </label>
                <label><span>l</span>
                    <input type="radio" name="sex" class="taglia-input"/>
                </label>
                <label><span>xl</span>
                    <input type="radio" name="sex" class="taglia-input"/>
                </label><br/>
            </form>
            <!--数量选择开始-->
            <div class="number">
                <div class="submit-minus" onclick="plus()"><img src="__PUBLIC__/ali/image/plus.png"/>
                </div>
                <input type="text" value="1" class="input" id="number">
                <div class="submit-plus" onclick="minus()"><img src="__PUBLIC__/ali/image/minus.png"/>
                </div>
            </div>
            <!--数量选择结束-->
        </div>
        <div class="none"></div>
        <footer>
            <!--<p class="left">-->
                <!--<img src="../../image/shoppingCat.png"/>加入购物车-->

            <!--</p>-->
            <p class="right" onclick="confirmOrder()"><a href="frm_confirmOrder.html"><img src="__PUBLIC__/ali/image/pay.png"/>立即购买</a>
            </p>
        </footer>
    </div>
</div>
</body>
<script type="text/javascript" src="__PUBLIC__/ali/script/api-lite.js"></script>
<script type="text/javascript" src="__PUBLIC__/ali/script/zepto.js"></script>
<script type="text/javascript" src="__PUBLIC__/ali/script/swipe.js"></script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("page2").style.visibility = "hidden";
        var li = $('.title-box-ul').contents().filter("li");
        window.mySwipe = new Swipe(document.getElementById('swipe'), {
            auto: 5000,
            continuous: true,
            callback: function (index, elem) {
                var i = li.length;
                while (i--) {
                    li[i].className = '';
                }
                li[index].className = 'active';
            },
            transitionEnd: function (index, elem) {
            }
        });
    }
    function productSize() {
        document.getElementById("page2").style.visibility = "visible";
//			api.openFrame({

//				name : 'frm_productSize',
//				url : 'frm_productSize.html',
//				bounces : false,
//				rect : {
//					x : 0,
//					y : 0,
//					w : 'auto',
//					h : 'auto'
//				}
//			});
    }

    function advanceSale() {
        var height = api["pageParam"]["y"];
        api.openFrame({
            name: 'frm_advanceSale',
            url: 'frm_advanceSale.html',
            delay: 300,
            rect: {
                x: 0,
                y: height,
                w: 'auto',
                h: 'auto'
            }
        });
    }

    function collect() {
        var height = api["pageParam"]["y"];
        api.openFrame({
            name: 'frm_collect',
            url: 'confirm',
            delay: 300,
            rect: {
                x: 0,
                y: height,
                w: 'auto',
                h: 'auto'
            }
        });
    }

    //分享
    function share() {
//		var height=api["pageParam"]["y"];
        api.openFrame({
            /*pageParam : {
             //类型：JSON对象;默认值：无;描述：（可选项）页面参数，在新页面通过api.pageParam获取
             vid : vid,
             advid : advid,
             title : ret['title'],
             summary : ret['summary'],
             pic : ret['pic'],
             wxurl : ret['wxurl'],
             otherurl : ret['otherurl'],
             },*/
            name: 'frm_shareframe',
            url: 'confirm',
            bounces: false,
            rect: {
                x: 0,
                y: 30,
                w: 'auto',
                h: 'auto'
            }
        });
    }
    function closeSize() {
        document.getElementById("page2").style.visibility = "hidden";
    }
    /*
     function share() {
     var advid = $api.val($api.byId('details_id'));
     var vid = $api.getStorage('vid');
     if (!vid)//未登录
     {
     openLogin("detailsreceivepage");
     } else if (vid) {
     api.showProgress({
     title : '加载中...',
     modal : false
     });
     var getadvUrl = '/Account/getadv?vid=' + vid + '&advid=' + advid;
     ajaxRequest(getadvUrl, 'GET', function(ret, err) {
     if (ret) {
     api.hideProgress();
     if (ret['result'] == '1001') {
     if (ret['isnull'] > 0)//第一次领取
     {
     $api.byId('details_partnum').innerHTML = ret['part_num'];
     }
     api.openFrame({
     pageParam : {
     //类型：JSON对象;默认值：无;描述：（可选项）页面参数，在新页面通过api.pageParam获取
     vid : vid,
     advid : advid,
     title : ret['title'],
     summary : ret['summary'],
     pic : ret['pic'],
     wxurl : ret['wxurl'],
     otherurl : ret['otherurl'],
     },
     name : 'frm_shareframe',
     url : 'frm_shareframe.html',
     bounces : false,
     rect : {
     x : 0,
     y : 0,
     w : 'auto',
     h : 'auto'
     }
     });
     } else {
     api.toast({
     msg : ret['info'],
     duration : 1000,
     location : 'bottom'//'top'
     });
     }
     }
     });
     }
     }*/
    /*数量选择开始*/
    function plus() {
        document.getElementById("number").value++;
    }

    function minus() {
        if (document.getElementById("number").value > 1)
            document.getElementById("number").value--;
        else
            document.getElementById("number").value
    }

    function confirmOrder() {
        window.location.href="confirm";
        var height = api["pageParam"]["y"];
        api.openFrame({
            name: 'confirm',
            url: 'confirm',
            delay: 300,
            rect: {
                x: 0,
                y: height,
                w: 'auto',
                h: 'auto'
            }
        });
        api.closeFrame({
            name: 'frm_productSize'
        });
    }

    /*数量选择结束*/
</script>
</html>